import List from "./List"
import Ipt from "./Ipt"
import "./Container.css"
import { useState } from "react"
//1.由于Ipt和List是平级的兄弟组件 所以呢他们要通信就要把状态提升至最近的父组件 也就意味着把共享的状态定义在最近的父组件中

//2.输入框输入内容,点击按钮需要进行添加,我们需要完成组件受控流程


//3.删除列表 点击删除的时候 回传id 由container进行处理

//4.把checkbox勾上的时候 让文字变成hotpink
const Container = () => {
    //定义一个数据data 用于渲染List
    let initialTodos = [
        {
            id: 1,
            todo: "面试",
            isComplete: true
        },
        {
            id: 2,
            todo: "拿offer",
            isComplete: false
        }
    ]
    let [todos, setTodos] = useState(initialTodos);

    //增加todo

    let add = val => {
        //非空验证
        if (!val) {
            return
        }
        //变更todos数组,将输入的内容添加到数组的最前面这一项
        let todoObj = {
            id: Math.random().toString(32).substr(2),
            todo: val,
            isComplete: false
        }
        // console.log(todoObj)
        setTodos([todoObj, ...todos])
    }

    //删除

    let del = id => {
        // console.log(id)
        // 返回todos中 id不等于传递过来的id的选项
        let newTodos = todos.filter(item => item.id !== id);
        //重新设置状态更新数据
        setTodos(newTodos)
    }

    //勾选todo,文字变成hotpink
    //思路:List组件勾选框框的时候,传递当前框框的id,和勾选之后的checked给Container组件,Container组件获取之后,修改todos数组中对应id数据的checked属性就可以了
    let checked = (id, checked) => {
        // console.log(id, checked)
        //通過id尋找对应的数据,修改它的checked
        let target = todos.find(item => item.id === id);
        target.isComplete = checked;
        // console.log(target)
        setTodos([...todos])
    }

    return (
        <div className="container">
            <Ipt onAdd={add} />
            <List onChecked={checked} onDel={del} todos={todos} />
        </div>
    )
}

export default Container